<template lang="html">
  <div class="app service">
    <top-header></top-header>
    <div class="w1200">
      <div class="bar">
        选择类目：
        <ul class="inline ver-middle">
          <li
          v-for='(item,index) in category'
          :class='{active:index==num_cate}'
          @click='addClass_cate(index)'>{{item.cate}}</li>
        </ul><br>
        <div class="h18"></div>
        <div class="select-city">
          选择城市：
          <ul class="inline ver-middle">
            <li
            v-for='(item,index) in listCity'
            :class='{active:index==num_city}'
            @click='addClass_city(index)'>{{item.name}}</li>
          </ul>
          <div class="bar-more inline">
            更多 <i class="el-icon-arrow-right"></i>
          </div>
        </div>
      </div>
      <div class="servers">
        <ul class="overhide">
          <li v-for='(item,index) in servers'>
            <a href="http://jieyouxiaoer.com/supplier.php?suppId=29" target="_blank">
              <div class="imgBox">
                <img v-lazy="item.img" alt="" class="po-middle">
              </div>
              <div class="info ellipsis">
                <div class="name">{{item.name}}</div>
                <div class="classes ellipsis">
                  服务类目：<span>{{item.classes}}</span>
                </div>
              </div>
              <div class="area">
                服务区域：{{item.area}}
              </div>
            </a>
          </li>
        </ul>
        <div class="tip">
          该服务由 <img :src="require('../../assets/images/xr-logo.png')" class="ver-middle" alt=""> 提供运营及售后支持
        </div>
      </div>
      <div class="provider">
        <div class="title">
          <span class="line ver-middle"></span><span class="font"><b>我是服务商/</b> service provider</span><span class="line ver-middle"></span>
        </div>
        <div class="content">
          <ul class="overhide">
            <li>
              <img v-lazy="require('../../assets/images/service-img1.jpg')" alt="">
              <div class="tit">海量客户 遍布全国</div>
              <div class="txt">31+城市、100+工场、6000+入驻企业、30000+注册用户</div>
            </li>
            <li>
              <img v-lazy="require('../../assets/images/service-img2.jpg')" alt="">
              <div class="tit">立体推广 精准直达</div>
              <div class="txt">专属推广活动、频道展示、优质企业推荐，多渠道提供合作机会</div>
            </li>
            <li>
              <img v-lazy="require('../../assets/images/service-img3.jpg')" alt="">
              <div class="tit">优质标签 彰显身份</div>
              <div class="txt">360度解忧小二服务商评估体系，金牌服务商认证标签</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="grayBg">
      <div class="w1200">
        <div class="title2">
          <img v-lazy='require("../../assets/images/xr-logo.png")' alt="" class="ver-middle">
          <span>站在“<b>互联网+</b>”的风口，和我们一起迎接 <i class="ver-middle">变革</i></span>
        </div>
        <div class="content">
          <ul class="overhide">
            <li>
              <img v-lazy="require('../../assets/images/progress1.png')" alt="">
              <div class="font">
                <div class="tit">一键注册</div>
                <div class="txt">
                  登录解忧小二官网，注册成功即可申请加入解忧工场服务商体系
                </div>
              </div>
            </li>
            <li><i class="el-icon-arrow-right"></i></li>
            <li>
              <img v-lazy="require('../../assets/images/progress2.png')" alt="">
              <div class="font">
                <div class="tit">提交申请信息</div>
                <div class="txt">
                  依照申请提示，详细填写服务商信息，提交相关资质等待系统审核
                </div>
              </div>
            </li>
            <li><i class="el-icon-arrow-right"></i></li>
            <li>
              <img v-lazy="require('../../assets/images/progress3.png')" alt="">
              <div class="font">
                <div class="tit">信息审核</div>
                <div class="txt">
                  解忧小二审核通过后，完成服务商身份账户验证
                </div>
              </div>
            </li>
            <li><i class="el-icon-arrow-right"></i></li>
            <li>
              <img v-lazy="require('../../assets/images/progress4.png')" alt="">
              <div class="font">
                <div class="tit">开通服务商权限</div>
                <div class="txt">
                  解忧小二运营人员将与您联系，开通相关服务权限
                </div>
              </div>
            </li>
          </ul>
          <div class="applyBtn btn">立即申请</div>
        </div>
      </div>
    </div>
    <div class="w1200 enterprise">
      <div class="title">
        <span class="line ver-middle"></span><span class="font"><b>我是企业/</b> enterprise</span><span class="line ver-middle"></span>
      </div>
      <ul class="content overhide">
        <li>
          <img v-lazy="require('../../assets/images/enterprise1.jpg')" alt="">
          <div class="font">
            <div class="tit">多快好省 一手包办</div>
            <div class="line"></div>
            <div class="txt">全面完善的服务商体系，高效解决企业发展所需的各类服务</div>
            <div class="arrow">
              <img src="../../assets/images/service-arrow.png" alt="">
            </div>
          </div>
        </li>
        <li>
          <div class="font">
            <div class="tit">优质服务 触手可及</div>
            <div class="line"></div>
            <div class="txt">严格的审核与评价体系，快速反馈放心交易</div>
            <div class="arrow a2">
              <img src="../../assets/images/service-arrow.png" alt="">
            </div>
          </div>
          <img v-lazy="require('../../assets/images/enterprise2.jpg')" alt="">
        </li>
        <li>
          <img v-lazy="require('../../assets/images/enterprise3.jpg')" alt="">
          <div class="font">
            <div class="tit">企业级服务平台 全新服务体验</div>
            <div class="line"></div>
            <div class="txt">全国31个重点城市、500多家服务商、6000多家企业已入驻解忧工场</div>
            <div class="arrow a3">
              <img src="../../assets/images/service-arrow.png" alt="">
            </div>
          </div>
        </li>
      </ul>
    </div>
    <bot-footer></bot-footer>
  </div>
</template>

<script>
import header from '../header/header.vue';
import footer from '../footer/footer.vue';
import {mapState} from 'vuex'
export default {
  data(){
    return{
      num_cate:0,
      num_city:0,
      category:[
        {cate:'全部',bol:true},{cate:'工商注册',bol:false},{cate:'财税服务',bol:false},{cate:'知识产权',bol:false},{cate:'社保服务',bol:false},{cate:'法律服务',bol:false}
      ],
      servers:[
        {img:require('../../assets/images/server-img1.png'),name:'杭州一通会计事务所有限公司',classes:'工商注册',area:'杭州-西湖区'},
        {img:require('../../assets/images/server-img2.png'),name:'杭州一通会计事务所有限公司',classes:'工商注册',area:'杭州-西湖区'},
        {img:require('../../assets/images/server-img3.png'),name:'杭州一通会计事务所有限公司',classes:'工商注册',area:'杭州-西湖区'},
        {img:require('../../assets/images/server-img4.png'),name:'杭州一通会计事务所有限公司',classes:'工商注册',area:'杭州-西湖区'},
        {img:require('../../assets/images/server-img5.png'),name:'杭州一通会计事务所有限公司',classes:'工商注册',area:'杭州-西湖区'},
        {img:require('../../assets/images/server-img6.png'),name:'杭州一通会计事务所有限公司',classes:'工商注册',area:'杭州-西湖区'}
      ],
      provider:[

      ]
    }
  },
  methods:{
    addClass_cate:function(index){
      this.num_cate=index;
    },
    addClass_city:function(index){
      this.num_city=index
    }
  },
  computed:mapState([
    'listCity'
  ]),
  mounted(){
    document.title = '解忧工场-服务',
    this.$store.dispatch('load_city_list')
  },
  components:{
    'top-header':header,
    'bot-footer':footer
  }
}
</script>

<style lang="less">
@import "service.less";
</style>
